<template>
	<!-- v-bind 绑定父组件的属性 -->
	<el-progress v-bind="$attrs" :percentage="p"></el-progress>
	
</template>

<script setup lang="ts">
import { onMounted ,ref} from 'vue';

	let props = defineProps({
		// 进度条进度
		percentage: {
			type: Number,
			default: 0
		},
		// 进度条是否有动画
		isAnimation: {
			type: Boolean,
			dafualt: false
		},
		// 动画时长
		time:{
			type:Number,
			default:3000
		}


	})
	let p=ref(0);
	onMounted(()=>{
		console.log(props.time,props.isAnimation)
		if(props.isAnimation){
			// 在规定时间内完成加载
			let t=Math.ceil(props.time/props.percentage)
			let timer=setInterval(()=>{
				p.value+=1;
				if (p.value>=props.percentage){
					p.value=props.percentage;
					clearInterval(timer)
				}
			},t)
		}else{
					p.value=props.percentage;
				}
	})
</script>

<style>
</style>